<template>
  <div>
    <div>
      <img width="100%" height="200" src="../../img/logo.png" />
    </div>
    <van-cell-group inset>
            <van-field v-model="account" label="用户名" placeholder="请输入用户名" />
            <van-field v-model="password" type="password" label="密码" placeholder="请输入密码" />
            <van-button style="width: 100%;" round="" type="primary" @click="login">登录</van-button>
    </van-cell-group>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { Login } from "../../api/login";
import { getCookie, setCookie } from "../../utils/auth";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const data = reactive({
      account: "",
      password: ""
    });
    const events = {
      login() {
        Login({
          account: data.account,
          password: data.password
        }).then(res => {
          if (res.result === 0) {
            setCookie(res.data.token);
            localStorage.setItem("user", JSON.stringify(res.data.user));
            router.push("/");
          }
        });
      }
    };

    return {
      ...toRefs(data),
      ...events
    };
  }
};
</script>

<style lang="scss" scoped></style>